<template>
  <div class="home-search">
    <nav-login></nav-login>
    <div class="w1200">
      <el-row>
        <el-col :span="7">
          <div class="seachLeft" @click="jumpHome">
            <img src="@/assets/logo/logo1.jpg" />
          </div>
        </el-col>
        <el-col :span="10">
          <div class="seach-box">
            <input
              v-model.trim="input"
              :class="{'input-border':myfocus}"
              @focus="myfocus = true"
              @blur="myfocus = false "
              placeholder="产品型号/产品名称（用空格分开文字，如导向轴 标准）"
              @keyup.enter="clickSeach"
            />
            <el-button type="primary" icon="el-icon-search" @click="clickSeach()">搜 索</el-button>
          </div>
        </el-col>
      </el-row>
      <div class="classify">
        <div class="brand">
          <div>
            <span>品牌</span>
            <el-button
              size="mini"
              type="primary "
              @click="clearbrandlist"
              plain
              style="height:28px;margin-top:5px"
            >清空筛选</el-button>
          </div>
          <ul>
            <li v-for="item in brands" :key="item.code">
              <el-button
                size="mini"
                type="text"
                @click="brandbtn(item)"
                :class="active2 == item.code ? 'active2' : '' "
              >
                <span style="margin:0 10px">{{item.brand_title}}</span>
              </el-button>
            </li>
          </ul>
        </div>
        <div class="brand">
          <div>
            <span>物料</span>
            <el-button
              size="mini"
              type="primary "
              plain
              @click="clearallmaterialslist"
              style="height:28px;margin-top:5px"
            >清空筛选</el-button>
          </div>
          <ul>
            <li v-for="(items,index) in allmaterials" :key="items.name">
              <el-button
                size="mini"
                type="text"
                @click="spcbtn(items.name,index)"
                :class="active3 == index ? 'active3' : '' "
              >
                <span style="margin:0 10px">{{items.name}}</span>
              </el-button>
            </li>
          </ul>
        </div>
      </div>
      <div class="seachdetail">
        <div class="seachdetail-left">
          <div class="seachdetail-left-title">
            <span>规格</span>
            <el-button size="mini" type="primary " plain @click="clearlist">清空筛选</el-button>
          </div>
          <div class="seachdetail-left-list">
            <el-collapse v-model="activeNames">
              <el-collapse-item :title="i.name" :name="i.code" v-for=" i in skus" :key="i.code">
            
                <el-checkbox-group v-model="checkList">
                  <el-checkbox
                    :label="check.name"
                    v-for="check in i.children"
                    :key="check.code"
                    @change="changecheck()"
                  >{{check.name}}</el-checkbox>
                </el-checkbox-group>
              </el-collapse-item>
            </el-collapse>
          </div>
        </div>

        <div v-loading="loading" class="seachdetail-right">
          <div class="seachdetail-right-top">
            <div>
              <el-button type="primary" size="mini" icon="el-icon-menu" plain>综合排序</el-button>
              <el-button type="primary" size="mini" @click="clear" plain>清除全部筛选</el-button>
            </div>

            <div>
              <el-button
                type="primary"
                size="mini"
                icon="el-icon-s-unfold"
                plain
                @click="listshow = true"
              >列表</el-button>
              <el-button
                type="primary"
                size="mini"
                icon="el-icon-menu"
                @click="listshow = false"
                plain
              >大图</el-button>
              <span>
                共
                <i style="color:#409eff;margin:0 5px">{{this.total}}</i>件商品
              </span>
            </div>
          </div>
          <ol v-if="goodsList.length" v-show="listshow == false">
            <li v-for="item in goodsList" :key="item.id">
              <router-link
                target="_blank"
                :key="item.id"
                class="goods"
                :to="{
                name:'productDetails',
                params:{
                  id:item.id,
                  pid:item.goods_id,
                  item:item
                }, 
                query:{
                  id:item.id,
                  pid:item.goods_id,
                  item:item
                }
              }"
              >
                <img v-lazyload="item.goods_logo" src="@/assets/logo/loading.png" />
                <!-- <img :src="item.goods_logo"> -->
                <el-tooltip
                  class="item"
                  effect="light"
                  :content="item.goods_title"
                  placement="top-start"
                >
                  <p>{{ item.goods_title }}</p>
                </el-tooltip>
                <!-- <p>{{ item.goods_title }}</p> -->
                <div>
                  <span>￥{{ item.selling_price }}</span>
                  <del>￥{{ item.market_price }}</del>
                </div>
                <bdi>{{item.norm_name}}</bdi>
              </router-link>
            </li>
          </ol>

          <el-table
            :data="goodsList"
            style="width: 100%  "
            :header-cell-style="{background:'#F5F7FA',color:'#606266',fontWeight:'800'}"
            @row-click="clickbtn"
            v-if="goodsList.length"
            v-show="listshow == true"
          >
            <el-table-column prop="goods_logo" label="图片" width="70" align="center">
              <template slot-scope="scope">
                <img :src="scope.row.goods_logo" width="60" height="60" />
              </template>
            </el-table-column>
            <el-table-column prop="goods_title" label="名称" width="300" align="center"></el-table-column>
            <el-table-column prop="brand" label="品牌" width="100" align="center"></el-table-column>
            <el-table-column prop="norm_name" label="状态" width="150" align="center"></el-table-column>
            <el-table-column prop="specs" label="规格" align="center"></el-table-column>
            <el-table-column prop="goods_stock" label="库存" width="100" align="center"></el-table-column>
            <el-table-column prop="selling_price" label="价格" align="center">
              <template slot-scope="scope">
                <div style="color:red">{{"￥"+`${scope.row.selling_price}`}}</div>
              </template>
            </el-table-column>
          </el-table>

          <no-data v-else msg="暂无相关商品..." style="min-height:1380px;" />
          <!-- && goodsList.length >=  20 -->
          <el-pagination
            v-if="goodsList.length "
            background
            layout="prev, pager, next"
            :total="total"
            :page-size="pageSize"
            :current-page="currentPage"
            @current-change="currentChange"
          ></el-pagination>
        </div>
      </div>
    </div>
    <bottom-nav></bottom-nav>
    <home-footer></home-footer>
  </div>
</template>

<script>
export default {
  name: "homeSeach",
  data() {
    return {
      activeNames: ["1"],
      myfocus: false,
      loading: false,
      input: "", // 搜索的关键字
      goodsList: [],
      total: 0,
      pageSize: 20, // 每一页个数
      currentPage: 1,
      allmaterials: [],
      brands: [],
      active2: null,
      changeitem: {}, //选择的品牌
      active3: null,
      brand: "",
      materials: "",
      skus: [], //规格
      checkList: [],
      listshow: true
    };
  },
  methods: {
    clickbtn(row, column, event) {
      this.$store.commit("HandleNodeClick", row.goods_title);
      console.log(this.$store.state.HandleNodeClick);
      console.log(row, column, event);
      let id = row.id;
      let item = row;
      let routeUrl = this.$router.resolve({
        path: "productDetails/" + `${id}`,
        query: {
          id,
          item
        }
      });
      window.open(routeUrl.href, "_blank");
    },
    // 分页  缺少总页数 ----
    async currentChange(current) {
      if (this.active2 !== null) {
        console.log("品牌不为空");
        this.brandbtn(this.changeitem, current);
      } else if (this.active3 !== null) {
        console.log("物料不为空");
        this.spcbtn(this.materials, this.active3, current);
      } else if (this.checkList !== []) {
        this.changecheck(current);
      } else {
        this.pageInit(current);
      }
    },

    clearbrandlist() {
      this.active2 = null;
      this.brand = null;
      this.changecheck();
    },
    clearallmaterialslist() {
      this.active3 = null;
      this.materials = null;
      this.changecheck();
    },
    clearlist() {
      this.checkList = [];
      this.changecheck();
    },
    //清除筛选
    clear() {
      this.active2 = null;
      this.brand = null;
      this.active3 = null;
      this.materials = null;
      this.checkList = [];
      this.pageInit();
    },
    //  当前页面的搜索
    async clickSeach() {
      if (this.input == "") {
        console.log(this.input);
      } else {
        this.clear();
      }
    },

    // 获取数据
    async pageInit(page = 1) {
      // this.loading = true
      let search = this.input;
      if (this.input == "") {
        console.log("请输入搜索内容");
      } else {
        const res = await this.$http({
          method: "post",
          url: "/api/home/search_goods/search",
          data: {
            search,
            page
          }
        });
        // let myList = [];
        let brands = [];
        console.log(res);
        if (res.data.State.Code == 200) {
          this.loading = false;
          this.goodsList = res.data.skp.data;
          this.total = res.data.skp.total; // 总页数
          this.pageSize = res.data.skp.per_page; // 每页显示数目
          this.currentPage = res.data.skp.current_page;
          this.skus = res.data.skp.skus;
          this.allmaterials = res.data.skp.materials;
          this.brands = res.data.skp.brand;
          var newobj = {};
          this.brands.forEach(item => {
            newobj[JSON.stringify(item)] = item;
          });
          this.brands = Object.keys(newobj).map(i => JSON.parse(i));
          // console.log(newobj)
          // console.log(this.brands)
        }
      }
    },
    async brandbtn(item, page = 1) {
      this.changeitem = item;
      // console.log(this.changeitem);
      this.active2 = item.code;
      console.log(item);
      let search = this.input;
      this.brand = item.brand_title;

      const res = await this.$http({
        method: "post",
        url: "/api/home/search_goods/getGoods",
        data: {
          search,
          page,
          brand: this.brand,
          materials: this.materials,
          norm_name: this.checkList
        }
      });
      console.log(res);
      let goodsList = [];

      if (res.data.State.Code == 200) {
        this.loading = false;
        this.goodsList = res.data.data;
        this.total = res.data.total; // 总页数
        this.pageSize = res.data.per_page; // 每页显示数目
        this.currentPage = res.data.current_page;
      }
    },
    async spcbtn(name, index, page = 1) {
      this.active3 = index;
      console.log(name, index);
      this.materials = name;
      let search = this.input;
      console.log(this.brand);
      console.log(search, this.brand, this.materials);
      const res = await this.$http({
        method: "post",
        url: "api/home/search_goods/getGoods",
        data: {
          search,
          page,
          brand: this.brand,
          materials: this.materials,
          norm_name: this.checkList
        }
      });
      console.log(res);
      let goodsList = [];
      let skus = [];
      if (res.data.State.Code == 200) {
        this.loading = false;
        this.goodsList = res.data.data;
        this.total = res.data.total; // 总页数
        this.pageSize = res.data.per_page; // 每页显示数目
        this.currentPage = res.data.current_page;
        this.skus = res.data.skus;
      }
    },
    async changecheck(page = 1) {
      console.log(111);
      console.log(this.checkList);

      let search = this.input;
      const res = await this.$http({
        method: "post",
        url: "api/home/search_goods/getGoods",
        data: {
          search,
          page,
          brand: this.brand,
          materials: this.materials,
          norm_name: this.checkList
        }
      });
      console.log(page);
      console.log(res);
      let goodsList = [];

      if (res.data.State.Code == 200) {
        this.loading = false;
        this.goodsList = res.data.data;
        this.total = res.data.total; // 总页数
        this.pageSize = res.data.per_page; // 每页显示数目
        this.currentPage = res.data.current_page;
        console.log(this.currentPage);
        // this.currentPage = 1;
      }
    },
    // 跳转到首页
    jumpHome() {
      this.$router.push("/");
    }
  },
  mounted() {
    this.input = this.$route.params.text || "" ||this.$route.params.name;
    this.pageInit();
    // console.log( this.$route.params.name,"//////////////////////////////")
  }
};
</script>

<style lang='scss' scoped>
.w1200 {
  width: 1200px;
  margin: auto;
  .classify {
    width: 100%;
    // height: 100px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    border: 1px solid #dcdfe6;
    .brand {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      margin: 5px 10px 0 10px;
      div {
        width: 80px;
        height: 70px;
        margin: 10px 10px 0 10px;
        text-align: center;
        // background-color: pink;
        span {
          width: 80px;
          font-weight: 800;
        }
      }
      ul {
        width: 1100px;
        max-height: 120px;
        overflow: auto;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        flex-wrap: wrap;
        margin-top: 5px;
        margin-bottom: 5px;
        li {
          margin: 0 20px;
          .el-button {
            color: #333;
            font-weight: normal;

            &:hover {
              color: #409eff;
            }
          }
          .active2 {
            background-color: #ecf5ff;
            border: 1px solid #b3d8ff;
            color: #409eff;
          }
          .active3 {
            background-color: #ecf5ff;
            border: 1px solid #b3d8ff;
            color: #409eff;
          }
        }
      }
    }
  }
  .seachdetail {
    width: 1200px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    .seachdetail-left {
      width: 200px;
      // height: 1000px;
      // background-color: pink;
      border-left: 1px solid #dcdfe6;
      border-bottom: 1px solid #dcdfe6;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      .seachdetail-left-title {
        height: 49px;
        background-color: #fff;
        color: #666;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        span {
          margin: 0 0 0 5px;
        }
        .el-button {
          margin: 0 5px 0 0;
        }
      }
      .seachdetail-left-list {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        // background-color: red;
        .el-collapse-item {
          padding-left: 5px;
        }
      }
    }
    .seachdetail-right {
      width: 1000px;
      // height: 1600px;
      position: relative;
      border-left: 1px solid #dcdfe6;
      border-right: 1px solid #dcdfe6;
      // background-color: red;
      .seachdetail-right-top {
        height: 49px;
        background-color: #fff;
        // margin-left: 8px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        .el-button {
          margin: 0 10px;
        }
        span {
          margin: 0 10px;
        }
      }
      ol {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        li {
          box-sizing: border-box;
          width: 180px;
          height: 270px;
          margin: 15px 30px 15px 35px;
          text-align: center;
          font-size: 16px;
          border: 1px solid rgba(240, 240, 240, 0.61);
          transition: all 0.4s ease-in-out;
          padding-bottom: 10px;
          cursor: pointer;
          &:hover {
            box-shadow: 0px 4px 10px rgba($color: #000000, $alpha: 0.15);
            border: 3px solid #409eff;
          }
          img {
            width: 140px;
            height: 140px;
            margin: 20px 20px;
          }
          p {
            padding: 0 10px;
            font-size: 14px;
            color: #333;
            line-height: 30px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            min-height: 30px;
          }
          div {
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            font-size: 16px;
            span {
              color: #f40;
            }
            del {
              color: #ccc;
            }
          }
          bdi {
            color: rgb(17, 17, 17);
            font-size: 12px;
            border: #ddd 1px solid;
            padding: 2px 14px;
          }
        }
      }
      .el-table {
        text-align: center;
        margin-bottom: 5px;
        min-height: 1000px;
      }

      .el-pagination {
        text-align: center;
        // position: absolute;
        // bottom: 10px;
        // left: 35%;
      }
    }
  }
  .seachLeft {
    img {
      cursor: pointer;
    }
  }
  /deep/ .seach-box {
    height: 108px;
    display: flex;
    flex-direction: row;
    align-items: center;
    input {
      flex: 1;
      height: 36px;
      padding-left: 10px;
      color: #333;
    }
    .input-border {
      border: 2px solid #409eff;
    }
    .el-input__inner {
      border-radius: 0px;
    }
    .el-button {
      border-radius: 0px;
    }
  }

  /deep/ .screen {
    margin-top: 20px;
    margin-left: 30px;
    .el-button {
      border-radius: 0px;
    }
  }

  .nogoods {
    margin-top: 30px;
    width: 100%;
    height: 314px;
    text-align: center;
    line-height: 314px;
    font-size: 60px;
    color: antiquewhite;
    letter-spacing: 5px;
    border: 3px solid antiquewhite;
  }
}
/deep/ .el-table {
  thead {
    .cell {
      text-align: center; // table 表头 左对齐
      color: #333 !important;
      font-size: 14px;
    }
  }
  tbody {
    .cell {
      box-sizing: border-box;
      text-align: center;
      color: #333 !important;
      font-size: 14px;
    }
    tr:hover > td {
      border-top: 3px solid #409eff !important;
      border-bottom: 3px solid #409eff !important;

      // color: #fff;
    }
    tr:hover td:first-child {
      border-left: 3px solid #409eff !important;
    }
    tr:hover td:last-child {
      border-right: 3px solid #409eff !important;
    }
  }

  .delete-row {
    color: #d8d8d8;
  }

  .el-table__expand-icon {
    //修改 el-tabel 折叠按钮的位置
    float: right;
  }

  // 去掉table的border start----------------------------
  border: 0;
  th,
  tr,
  td {
    border: 0;
    background-color: #fff;
  }

  &::before {
    height: 0px;
  }
  &::after {
    width: 0;
  }

  .el-table__fixed:before {
    height: 0;
  }

  // 去掉table的border end----------------------------
}
/deep/ .el-collapse-item__header {
  color: #333;
  font-size: 14px;
  font-weight: normal;
  // line-height:14px;
  line-height:48px;
  text-overflow: ellipsis; //让超出的用...实现
  white-space: nowrap; //禁止换行
  overflow: hidden; //超出的隐藏
  display: block;

  // i {
  //   text-align: right;
  //   width: 60px;
  // }
}
</style>